<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_数据代理</title>
</head>
<body>

<!--
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作
2. 好处: 通过vm对象就可以方便的操作data中的数据
3. 实现:
  1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性
  2). 所有添加的属性都包含get/set方法
  3). 在get/set方法中去操作data中对应的属性
      在get方法中读取data中对应的属性值返回
      在set方法中将最新指定的值保存到data对应的属性上
-->

<div id="test"></div>

<script src="./js/mvvm/compile.js"></script>
<script src="./js/mvvm/mvvm.js"></script>
<script src="./js/mvvm/observer.js"></script>
<script src="./js/mvvm/watcher.js"></script>
<script>
  const vm = new MVVM({
    data: {
      name: 'tom2',
      age: 12
    }
  })
  console.log(vm)
  // 谁是代理对象, 谁是被代理对象?
  console.log(vm.name, vm._data.name) // tom2  代理读

  vm.name = 'jack2' // 代理写
  console.log(vm.name, vm._data.name) // jack2

  // 通过代理对象(vm)来操作被代理对象(data)中的所有属性的读写操作
  // 作用: 简化编码
  // 实现: 通过defineProperty给vm添加与data中的属性对应的属性, 且每个属性都指定getter/setter
        // 在getter中读取data中对应的属性返回
        // 在setter中将最新指定的值保存到data对应的属性上

</script>

</body>
</html>